import React,{ useState,memo } from 'react'
import { RecommendWrapper } from './style'
import propTypes from 'prop-types'
import LazyLoad from 'react-lazyload'
import {Link} from 'react-router-dom'
import DefaultImg from '@/assets/images/default.png'

interface ListProps{
    recommend:any[];
  }

const RecommendList:React.FC<ListProps>=(props)=> {
  const { recommend } = props;

  return (
    <RecommendWrapper>

      <div className='list'>
        {
          recommend
          // .length==0?
          // <div>
          //   暂无景点
          // </div>
          // :
          &&recommend.map((item,index) => 
            <div className='div' key={index}>
                <Link
                    className='course-List'
                    to={`/recommend/${item.aid}`}
                    key={item.id}
                    >
               <LazyLoad 
                  placeholder={<img className='img' 
                  src={DefaultImg}
                  />}>
                  <img className='img'
                    src={item.img} alt="" />
                </LazyLoad>
              <p className='title'>{item.title}</p>
              <div className="list_footer">
                {item.author && 
                    <div className="author">
                        <div className='coupon'>{item.author}</div>
                    </div>
                }
                {
                  item.watches&&
                  <p className='price'>
                    {item.watches>0 && <span style={{fontSize:'16px',fontWeight:'normal'}}></span>}
                    <i className='iconfont icon-guankan'></i>
                    {item.watches}
                </p>
                }
                {
                  item.likes&&
                  <p className='price'>
                    {item.likes>0 && <span style={{fontSize:'16px',fontWeight:'normal'}}></span>}
                    <i className='iconfont icon-zan'></i>
                    {item.likes}
                </p>
                }
              </div>
              </Link>
            </div>
          )
        }
        
      </div>
      
    </RecommendWrapper>
  )
}
RecommendList.propTypes = {
  recommend:propTypes.array.isRequired
}
export default memo (RecommendList)